<!--  -->
<template>
  <div class="list" ref="wrapper">
      <div>
        <div class="area">
            <div class="title border-topbottom" >当前城市</div>
            <div class="button-list">
                <div class="button-wrapper">
                  <div class="button">北京</div>
                </div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom">热门城市</div>
            <div class="button-list">
                <div class="button-wrapper"
                v-for="item of hotCities"
                :key="item.id"
                >
                  <div class="button">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="area">
            <div class="title border-topbottom" >字母排序</div>
              <ul class="item-container">
                <li class="words"
                v-for="(item , key) of cities"
                :key="key"
                >{{key}}</li>
              </ul>
        </div>
        <div class="area"
        v-for="(item , key) of cities"
        :key="key"
        > <!--循环的是个对象的时候，第二项就不是index了，是key -->
            <div class="title border-topbottom" >{{key}}</div>
            <div class="item-list">
                <div class="item border-bottom"
                v-for="innerItem of item"
                :key="innerItem.id"
                > <!--内部是个二次循环 -->
                {{innerItem.name}}</div>
                <div class="item border-bottom">阿拉尔</div>
                <div class="item border-bottom">阿拉尔</div>
                <div class="item border-bottom">阿拉尔</div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    cities: Object,
    hotCities: Array
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  data () {
    return {
    }
  },

  components: {},

  computed: {},

  methods: {}
}

</script>
<style lang='stylus' scoped>
  @import "~styles/varibles.styl"
  .border-topbottom /* 处理一像素边框 */
    &:before
        border-color: #ccc
    &:after
        border-color: #ccc
  .border-bottom /* 处理一像素边框 */
    &:before
        border-color: #ccc
  .list
    overflow: hidden /* 避免超出的部分显示 */
    position: absolute
    top: 1.58rem
    left: 0
    right : 0
    bottom : 0
  .title
    line-height : .54rem
    padding-left : .2rem
    background :#eee
    color: #666
    font-size : .26rem
  .button-list
    overflow: hidden
    padding: .1rem .6rem .1rem .1rem /* 上右下左 */
    .button-wrapper
      float :left
      width :33.3%
      .button
        text-align : center
        margin : .1rem
        padding : .1rem 0 /* 上下是.1rem，左右是0 */
        border: .02rem solid #ccc
        border-radius: .06rem
  .item-list
    .item
      line-height : .76rem
      padding-left : .2rem
  .item-container
    position: relative
    padding: .3rem
    overflow: hidden
    .words
      width: 16.6%;
      height: .9rem;
      line-height: .9rem;
      font-size: .28rem;
      text-align: center;
      float: left;
      position: relative;
      color: #212121;
</style>
